import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-locale';
import { Menu, Avatar } from 'antd';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

import { PoweroffOutlined, LockOutlined } from '@ant-design/icons';


@connect(({ project, loading }) => ({
    project,
    loading: loading.effects['project/fetchMyInfo']
}))     
class zbkAvatar extends PureComponent {
    componentDidMount() {
        this.props.dispatch({
            type: 'project/fetchMyInfo'
        })
    }

    handleMenuClick = ({ key }) => {
        const { dispatch } = this.props;
        if (key === 'logout') {
            dispatch({
                type: 'project/logout',
            })
        } else if (key === 'passwd') {
            let url = window.localStorage.getItem('KD3000_URL') + '/account/passwd'
            url = url.replace('//account', '/account')
            window.location.href = url
        }
    };
    render() {
        const { avatar, username, realname } = this.props.project.myInfo
        const menu = (realname) => (
            <Menu selectedKeys={[]} onClick={this.handleMenuClick.bind(this)}>
                <Menu.Item key='info' style={{ fontWeight: 'bold', color: '#333333', padding: '10px', cursor: 'default' }}>
                    @{username}
                </Menu.Item>
                <Menu.Divider />
                <Menu.Item key='passwd'>
                    <LockOutlined className={styles.icon} />
                    {formatMessage({ id: 'navbar.password' })}
                </Menu.Item>
                <Menu.Item key='logout'>
                    <PoweroffOutlined className={styles.icon} />
                    {formatMessage({ id: 'navbar.logout' })}
                </Menu.Item>
            </Menu>
        );
        return (
            <HeaderDropdown overlay={menu(realname)} placement="bottomRight">
                <span className={`${styles.action} ${styles.account}`}>
                    <span className={styles.name}>{formatMessage({ id: 'app.welcome' })}, {realname}</span>
                    <Avatar
                        // size="large"
                        src={avatar}
                        className={styles.avatar}
                    />
                </span>
            </HeaderDropdown>
        )
    }
}
export default zbkAvatar